
<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <div></div>
</template>

<script setup>
// cSpell:ignore pixi
import { 
  Application, 
  Container,
  Assets, 
  Spritesheet, Sprite
} from 'pixi.js';

(async () =>
{
    // Create a new application
    const app = new Application();

    // Initialize the application
    await app.init({ background: '#ffffff', resizeTo: window });

    // Append the application canvas to the document body
    document.body.appendChild(app.canvas);

    // Create and add a container to the stage
    const container = new Container();

    app.stage.addChild(container);

    // 1. 加载雪碧图
    const texture = await Assets.load('/download.png');

    // 2. 创建图集定义（假设你知道子图位置）
    const sheetData = {
        frames: {
            'player': { frame: { x: 40, y: 0, w: 44, h: 52 } },
            'enemy': { frame: { x: 200, y: 30, w: 64, h: 64 } }
        },
        meta: {
            image: 'download.png',
            scale: '1'
        }
    };

    // 3. 创建并解析精灵图集
    const sheet = new Spritesheet(texture.baseTexture, sheetData);
    await sheet.parse();

    // 4. 提取特定子图
    const playerSprite = new Sprite(sheet.textures.player);
    playerSprite.position.set(300, 200);
    app.stage.addChild(playerSprite);                 
})();

</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
canvas{
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>
